<template>
    <div :style="carStyle" class="cardparentview">
        <div v-if="!obj.startTime" class="defaultText">请在右侧配置数据</div>
        <template v-else>
            <div class="lineTitle" :style="titleStyle">{{ obj.title }}</div>
            <div class="timeout" :style="timeOutStyle">{{ endTimeCount }}</div>
            <div class="datetime" :style="timeStyle">{{ startTime }}<span style="padding:0 10px;">-</span>{{ endTime }}
            </div>
            <div class="resetview" v-if="showClose">
                <p @click="resetDatetime">重置</p>
                <p v-if="obj.isClose" class="disableclose">关闭</p>
                <p v-else @click="closeTimeout">关闭</p>
            </div>
        </template>
    </div>
</template>

<script>
import moment from "moment"

export default {
    Name: "TimeOut",
    props: {
        obj: Object,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        submitBard: Function,
    },
    data() {
        return {
            value: 0,
            titleStyle: {},
            timeStyle: {},
            timeOutStyle: {},
            timer: null,
            endTimeCount: "",
            startTime: "",
            endTime: "",
            carStyle: {},
            showClose: false,
        }
    },
    mounted() {
        this.setStyle();
        this.dataStr = JSON.stringify(this.obj);

        this.init();
    },
    methods: {
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";


            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                color: style.color,
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.titleStyle = {
                fontSize: style.fontSize + "px",
                color: style.color,
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
            };

            var data = this.obj;
            this.timeStyle = {
                color: this.obj.dateTimeColor,
                fontSize: this.obj.dateTimeSize + "px",
                fontStyle: data.dateTimeStyle,
                fontWeight: data.dateTimeWeight,
            }

            this.timeOutStyle = {
                color: this.obj.timeOutColor,
                fontSize: this.obj.timeOutSize + "px",
                fontWeight: data.timeOutWeight,
                fontStyle: data.timeOutStyle,
            }
        },
        init() {
            var self = this;
            self.showClose = false;
            clearInterval(this.timer)
            if (this.obj.startTime) {
                var nowDate = new Date();
                var startDate = new Date(this.obj.startTime);
                var endtime = new Date(this.obj.startTime);
                if (this.obj.timeType == 2) {
                    this.endTimeCount = this.obj.timeCount + "天";
                    endtime.setDate(startDate.getDate() + this.obj.timeCount);
                }
                else if (this.obj.timeType == 1) {
                    this.endTimeCount = this.obj.timeCount + "时";
                    endtime.setHours(startDate.getHours() + this.obj.timeCount);
                }
                else if (this.obj.timeType == 0) {
                    this.endTimeCount = this.obj.timeCount + "分";
                    endtime.setMinutes(startDate.getMinutes() + this.obj.timeCount);
                }

                this.startTime = moment(startDate).format("YYYY/MM/DD HH:mm");
                this.endTime = moment(endtime).format("YYYY/MM/DD HH:mm");
                var jishu = 0;
                this.timer = setInterval(function () {
                    jishu++;
                    nowDate = new Date();
                    if (jishu == 2) {
                        // console.log(jishu)
                        jishu = 0;
                        if (nowDate >= startDate) {
                            self.startTime = moment().format("YYYY/MM/DD HH:mm");

                            var day = Math.floor((endtime - nowDate) / (1 * 24 * 60 * 60 * 1000))
                            var hours = Math.floor((endtime - nowDate) / (60 * 60 * 1000))
                            var miuntes = Math.floor((endtime - nowDate) / (60 * 1000))
                            if (self.obj.timeType == 2) {
                                if (day > 0) {
                                    self.endTimeCount = day + "天";
                                } else if (hours > 0) {
                                    self.endTimeCount = hours + "时";
                                } else {
                                    self.endTimeCount = (miuntes > 0 ? miuntes : 0) + "分";
                                }
                            } else if (self.obj.timeType == 1) {
                                if (hours > 0) {
                                    self.endTimeCount = hours + "时";
                                } else {
                                    self.endTimeCount = (miuntes > 0 ? miuntes : 0) + "分";
                                }
                            } else {
                                self.endTimeCount = (miuntes > 0 ? miuntes : 0) + "分";
                            }
                            // console.log(miuntes);
                            // this.endTimeCount = this.obj.timeCount + "天";
                        }
                    }
                    if (nowDate >= endtime) {
                        self.showClose = true;
                    }
                    if (nowDate >= endtime && self.obj.isTwinkle && !self.obj.isClose) {
                        self.startTime = moment(startDate).format("YYYY/MM/DD HH:mm");
                        if (jishu % 2) {
                            self.carStyle.backgroundColor = self.obj.bgColor1;
                        } else {
                            self.carStyle.backgroundColor = self.obj.bgColor2;
                        }
                    }

                }, 500)
            }
        },
        // 重置按钮
        resetDatetime() {
            if (!this.isEdit) {
                this.obj.startTime = moment().format();
                this.obj.isClose = false;
                this.$emit('submitBard')
                this.init();
            }
        },
        closeTimeout() {
            if (!this.isEdit) {
                clearInterval(this.timer)
                this.obj.isClose = true;
                this.$emit('submitBard')
            }
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();

                if (this.isEdit && JSON.stringify(this.obj) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj);
                    this.init();
                    this.obj.isClose = false;
                }
            }
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>

<style scoped>
.cardparentview:hover .resetview {
    display: block;
}

.timeout {
    width: 100%;
    position: absolute;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
}

.datetime {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
}

.resetview {
    position: absolute;
    right: 15px;
    top: 60%;
    transform: translateY(-50%);
    display: none;
}

.resetview p {
    cursor: pointer;
    font-size: 12px;
    margin-top: 10px;
    padding: 5px 5px 3px 5px;
    border-radius: 2px;
}

.resetview p:nth-child(1) {
    background: #409eff;
}

.resetview p:nth-child(2) {
    background: #f56c6c;
}

.resetview p.disableclose {
    background: #909399;
}
</style>